<template>
	<view class="login-box">
		<view class="new_bg">
			<view class="tip_box">授权提醒</view>
			<view class="content_box">
				请授权头像等信息，以便为您提供更好的服务
			</view>
			<!-- #ifdef MP -->
			<button v-if="isShow" open-type="getUserInfo" class="new-confirm-btn" @getuserinfo="showAuthModal"
				hover-class="hoverBtn">立即授权</button>
			<!-- #endif -->
			<button class="new-close-btn" @click="cancelAuth" hover-class="hoverBtn">再想想</button>
			<view class="agree">
				<view class="text_box">
					<checkbox @click="isShow = !isShow" color="#f60f1b" style="transform:scale(0.7)"
						class="tick_icon_box" value="cb" :checked="iconShow" />
					<text style="color: #999999">授权即表示同意</text>
					<text class="fontColor-primary" @click="navTo('1')">《隐私保护政策》</text>
					<text class="fontColor-primary" @click="navTo('2')">《用户登录协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	//import { editUserInfo, userLogin } from '../../common/api.js';
	import {
		userLogin,
		decrypt_datas,
		insertopenids
	} from '../../common/api.js';
	import api from '@/common/util.js'
	import {
		mapState,
		mapMutations
	} from "vuex";
	var app = require('@/common/common.js'); //引入公共方法
	export default {
		data() {
			return {
				isShow: true,
				user: '',
				iconShow: true,
				type:'',
				item:''
			}
		},
		onLoad(option) {
			console.log(333,option)
			this.type = option.type;
			if(option.data){
				let item = JSON.parse(option.data);
				this.item = item;
			}
			this.user = option.from || ''
		},
		computed: {
			...mapState(['share_id', 'openid', 'agent_id', 'userInfo']),
		},
		methods: {
			...mapMutations(['setLogin', 'setloginStatus', 'setUserInfo', 'login']),
			unAuthModal() {
				uni.showToast({
					title: '请阅读相关协议',
					duration: 2000,
					icon: "none"
				})
			},
			// 授权判断
			showAuthModal(res) {
				console.log(123456, res)
				//#ifdef H5
				this.login();
				//#endif
				//#ifdef MP
				if (res.detail.iv) {
					// store.commit('login',openid); // 如果授权，就将openid 存起来，否则不存
					let info = {};
					const {
						nickName,
						avatarUrl,
						city,
						province,
						country
					} = res.detail.userInfo;
					info.user_name = nickName;
					info.headimgurl = avatarUrl;
					info.city = city;
					info.province = province;
					info.country = country;
					this.setUserInfo({
						user_name: info.user_name,
						province: info.province,
						city: info.city,
						country: info.country,
						headimgurl: info.headimgurl
					});
					uni.setStorageSync('userInfo', info);
					const that = this;
					// #ifdef MP-WEIXIN
					if (app.is_iOS()) {
						//iOS的方法
						uni.login({
							provider: 'apple',
							success(loginRes) {
								console.log('登陆成功', loginRes)
								const {
									code
								} = loginRes
								console.log(code, res.detail.encryptedData, res.detail.iv)
								userLogin({
									code
								}).then(({
									data
								}) => {
									const {
										openid
									} = data;
									console.log(222111, data)
									console.log(222000, openid)
									that.setLogin(openid)
									uni.setStorageSync('super_token', openid);
									that.setloginStatus(true)
									uni.getUserInfo({
										provider: 'apple', //iOS的方法
										success: function(resdata) {
											resdata.userInfo.openid = data.openid;
											console.log(JSON.stringify(resdata.userInfo))
											insertopenids({
												data: JSON.stringify(resdata.userInfo)
											}).then(res3 => {
												console.log(666, res3)
												if (res3.code === 2000) {
													if (that.user === 'user') {
														// 登录成功后跳转的地址
														uni.switchTab({
															url: '/pages/user/index'
														});
													} else {
														// 登录成功后跳转的地址
														uni.navigateTo({
															url: '/pages/index/race_detail?from=index&type=' + that.type + '&data=' + JSON.stringify(that.item)
														})
													}
												}
											})
										}
									})
								})
							},
							fail(e) {
								console.log('errer->', e)
							}
						});
					} else {
						uni.login({
							provider: 'weixin',
							success(loginRes) {
								console.log('登陆成功', loginRes)
								const {
									code
								} = loginRes
								console.log(code, res.detail.encryptedData, res.detail.iv)
								userLogin({
									code
								}).then(({
									data
								}) => {
									const {
										openid
									} = data;
									console.log(222111, data)
									console.log(222000, openid)
									that.setLogin(openid)
									uni.setStorageSync('super_token', openid);
									that.setloginStatus(true)
									uni.getUserInfo({
										provider: 'weixin',
										success: function(resdata) {
											resdata.userInfo.openid = data.openid;
											console.log(JSON.stringify(resdata.userInfo))
											insertopenids({
												data: JSON.stringify(resdata.userInfo)
											}).then(res3 => {
												console.log(666, res3)
												if (res3.code === 2000) {
													if (that.user === 'user') {
														// 登录成功后跳转的地址
														uni.switchTab({
															url: '/pages/user/index'
														});
													} else {
														// 登录成功后跳转的地址
														uni.navigateTo({
															url: '/pages/index/race_detail?from=index&type=' + that.type + '&data=' + JSON.stringify(that.item)
														})
													}
												}
											})
										}
									})
								})
							},
							fail(e) {
								console.log('errer->', e)
							}
						});
					}
					// #endif

				}
				//#endif

			},
			cancelAuth() {
				store.commit('loginOut')
				uni.switchTab({
					url: '/pages/user/index'
				})
			},
			navTo(type) {
				if (type === '1') {
					uni.navigateTo({
						url: '/pages/signUp/statement1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/signUp/statement2'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-box {
		height: calc(100vh);
	}

	.bg {
		background: #C0C4CC;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box {
		width: 540upx;
	}

	.box-img {
		width: 100%;
		height: 320upx;
		position: relative;

		.img1 {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
		}

		.img2 {
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 247rpx;
			height: 251rpx;
		}

		.img3 {
			position: absolute;
			top: 170rpx;
			left: 50%;
			font-size: 100rpx;
			transform: translateX(-50%);
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		background-color: #fff;
		border-radius: 0 0 18upx 18upx;
		padding: 60upx 0 40upx 0;

		.info_title {
			font-size: 36upx;
			font-weight: 600;
			color: #000;
			letter-spacing: 2upx;
		}

		.info_desc {
			width: 446upx;
			color: #999;
			font-weight: 500;
			font-size: 28upx;
			line-height: 41upx;
			text-align: center;
			padding: 40upx 0;
		}

		.confirm-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 440upx;
			height: 88upx;
			border-radius: 44upx;
			font-size: 32upx;
			color: #fff;
			margin-bottom: 40upx;
			letter-spacing: 2upx;
		}

		.close-btn {
			font-size: 28upx;
			color: #999;
			letter-spacing: 2upx;
		}
	}

	.new_bg {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30%;

		.tip_box {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.content_box {
			width: 510rpx;
			font-size: 32rpx;
			color: #666666;
			line-height: 41rpx;
			text-align: center;
			margin-bottom: 125rpx;
		}

		.new-confirm-btn {
			width: 690rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 40rpx;
			background-color: #02BB6F;
		}

		.new-close-btn {
			width: 690rpx;
			height: 88rpx;
			border: 2rpx solid #DEDEDE;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #999999;
			text-align: center;
			line-height: 88rpx;
			margin-bottom: 30rpx;
		}

		.agree {
			display: flex;
			flex-direction: row;

			.img_box {
				width: 30rpx;
				height: 30rpx;
				margin-right: 9rpx;
				margin-top: 10rpx;
			}

			.text_box {
				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.hoverBtn {
		background-color: #cccccc;
	}
</style>
